<template>
  <div class="mt-md">
    <n-form label-placement="left" :label-width="80" :model="formValue" :rules="rules" ref="formRef">
      <n-form-item path="username">
        <n-input v-model:value="formValue.username" placeholder="输入姓名" />
      </n-form-item>
      <n-form-item path="password">
        <n-input type="password" show-password-on="click" placeholder="输入密码" v-model:value="formValue.password" />
      </n-form-item>
      <n-form-item>
        <n-button @click="handleValidateClick" style="width: 100%" type="primary">验证</n-button>
      </n-form-item>
    </n-form>
  </div>
</template>

<script lang="ts">
import { LockOutlined, UserOutlined } from '@vicons/antd'
import { defineComponent, ref } from 'vue'
import { NInput, NForm, NFormItem, NButton } from 'naive-ui'
import { FormRef } from '@/types/naiveui-from'
import appStore from '@/store'
import { Login } from '@/store/modules/user/actionCreators'
import { useRouter } from 'vue-router'

// import store from '../../store'
// import { Login } from '../../store/modules/user/actionCreators'

const rules = {
  username: { required: true, message: '请输入账号', trigger: 'blur' },
  password: { required: true, message: '请输入密码', trigger: 'blur' }
}

export default defineComponent({
  name: 'LoginForm',
  components: {
    NInput,
    NForm,
    NButton,
    NFormItem,
    UserOutlined,
    LockOutlined
  },
  setup() {
    const formValue = ref({ username: '', password: '' })
    const formRef = ref<FormRef | null>(null)
    const router = useRouter()
    const handleValidateClick = () => {
      formRef.value?.validate(async errors => {
        if (!errors) {
          await appStore.dispatch(Login(formValue.value.username, formValue.value.password))
          router.push('/')
        }
      })
    }

    return {
      formRef,
      formValue,
      rules,
      handleValidateClick
    }
  }
})
</script>

<style scoped></style>
